<route lang="json5">
{
  style: {
    navigationBarTitleText: '我的',
  },
}
</route>

<template>
  <view class="root-container">
    <gi-page-wrapper>
      <view class="page-container">
        <!-- User Profile Header -->
        <view class="profile-content">
          <sar-avatar class="avatar" size="large" :src="userInfo?.avatar || '/static/images/default-avatar.png'" />
          <view class="user-info">
            <view class="username">{{ userInfo?.nickname || userInfo?.username || '未设置昵称' }}</view>
            <view class="user-meta">
              <view class="uid">ID: {{ userInfo?.id || '未知' }}</view>
              <view v-if="userInfo?.deptName" class="dept-tag">
                <sar-tag size="small" type="primary">{{ userInfo.deptName }}</sar-tag>
              </view>
              <view v-if="userInfo?.roles?.length" class="role-tags">
                <sar-tag
                  v-for="(role, index) in userInfo.roles"
                  :key="index"
                  size="small"
                  type="success"
                  class="role-tag"
                >
                  {{ role }}
                </sar-tag>
              </view>
              <sar-tag
                size="small"
                :type="userInfo?.status === 1 ? 'success' : 'danger'"
              >
                {{ userInfo?.status === 1 ? '正常' : '禁用' }}
              </sar-tag>
            </view>
          </view>
          <view class="profile-actions">
            <sar-button size="mini" type="primary" plain @click="navigateToEdit">
              编辑资料
            </sar-button>
          </view>
        </view>

        <!-- Feature Menus -->
        <sar-card class="menu-section" :body-style="{ padding: '12px 8px' }">
          <sar-grid :columns="4" gap="8">
            <sar-grid-item v-for="(feature, index) in features" :key="index" @click="handleFeatureClick(feature.type)">
              <view class="feature-item">
                <view class="feature-icon" :style="{ backgroundColor: feature.bgColor }">
                  <sar-icon :name="feature.icon" size="20px" color="#555" />
                </view>
                <view class="feature-name">{{ feature.name }}</view>
              </view>
            </sar-grid-item>
          </sar-grid>
        </sar-card>

        <!-- List Menus -->
        <sar-card class="menu-card" :body-style="{ padding: '0' }">
          <view class="custom-list">
            <view
              v-for="(menu, index) in menuList"
              :key="index"
              class="custom-list-item"
              @click="handleMenuClick(menu.type)"
            >
              <view class="list-item-left">
                <view class="menu-icon" :style="{ backgroundColor: menu.bgColor }">
                  <sar-icon :name="menu.icon" size="18px" color="#555" />
                </view>
                <text class="menu-title">{{ menu.title }}</text>
              </view>
              <view class="list-item-right">
                <sar-badge v-if="menu.badge" :value="menu.badge" type="primary" />
                <sar-icon name="right" color="#ccc" />
              </view>
            </view>
          </view>
        </sar-card>

        <!-- About & Settings Menu -->
        <sar-card class="menu-card" :body-style="{ padding: '0' }">
          <view class="custom-list">
            <view
              v-for="(menu, index) in settingMenus"
              :key="index"
              class="custom-list-item"
              @click="handleMenuClick(menu.type)"
            >
              <view class="list-item-left">
                <view class="menu-icon" :style="{ backgroundColor: menu.bgColor }">
                  <sar-icon :name="menu.icon" size="18px" color="#555" />
                </view>
                <text class="menu-title">{{ menu.title }}</text>
              </view>
              <view class="list-item-right">
                <sar-badge v-if="menu.dot" dot />
                <sar-icon name="right" color="#ccc" />
              </view>
            </view>
          </view>
        </sar-card>

        <!-- 退出登录按钮 -->
        <view class="logout-section">
          <sar-button class="logout-button" theme="danger" block @click="showLogoutConfirm">
            退出登录
          </sar-button>
        </view>

        <!-- Footer -->
        <view class="footer">
          <text class="footer-text">Copyright © 2025 gi-uni-app</text>
        </view>
      </view>
    </gi-page-wrapper>
  </view>
</template>

<script setup lang="ts">
import { getUserInfo } from '@/apis/auth'
import { useUserStore } from '@/store'

defineOptions({
  inheritAttrs: false,
})
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

// 显示退出确认弹窗
function showLogoutConfirm() {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: ({ confirm }) => {
      if (confirm) {
        userStore.handleLogout()
      }
    },
  })
}

// 获取用户信息
async function fetchUserInfo() {
  try {
    const { data, success } = await getUserInfo()
    if (success && data) {
      userStore.setUserInfo(data)
    }
  }
  catch (error) {
    console.error('获取用户信息失败:', error)
    uni.showToast({
      title: '获取用户信息失败',
      icon: 'none',
    })
  }
}

// 页面加载时获取用户信息
onMounted(() => {
  fetchUserInfo()
})

// Feature grid items
const features = [
  { name: '收藏', icon: 'star-fill', type: 'favorites', bgColor: '#E8F4FF' },
  { name: '订单', icon: 'list-check', type: 'orders', bgColor: '#EEF1FF' },
  { name: '钱包', icon: 'wallet', type: 'wallet', bgColor: '#E6F8F6' },
  { name: '客服', icon: 'headphones', type: 'service', bgColor: '#FFF6E9' },
]

// Menu list items
const menuList = [
  { title: '我的消息', icon: 'bell', type: 'messages', bgColor: '#E8F4FF', badge: 12 },
  { title: '浏览历史', icon: 'clock-history', type: 'history', bgColor: '#F5EAFF' },
  { title: '我的订阅', icon: 'book', type: 'subscriptions', bgColor: '#E6FBFF' },
  { title: '地址管理', icon: 'geo-alt', type: 'address', bgColor: '#FFF9E6' },
]

// Settings menu items
const settingMenus = [
  { title: '账号设置', icon: 'person-gear', type: 'account', bgColor: '#E8F4FF' },
  { title: '关于我们', icon: 'info-circle', type: 'about', bgColor: '#EEF1FF', dot: true },
  { title: '意见反馈', icon: 'chat-square-text', type: 'feedback', bgColor: '#E6F8F6' },
]

// Handle clicks
function handleFeatureClick(type: string) {
  uni.showToast({
    title: `打开${type}功能`,
    icon: 'none',
  })
}

function handleMenuClick(type: string) {
  if (type === 'account') {
    navigateToEdit()
  }
  else {
    uni.showToast({
      title: `进入${type}页面`,
      icon: 'none',
    })
  }
}

// 跳转到编辑页面
function navigateToEdit() {
  uni.navigateTo({
    url: '/pages/user/edit',
  })
}
</script>

<style lang="scss" scoped>
.root-container {
  width: 100%;
  height: 100%;
}

// 全局样式变量
$bg-color: #f5f7fa;
$primary-color: #4080ff;
$card-radius: 12px;
$card-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
$active-bg: rgba(0, 0, 0, 0.02);
$text-color: #333;
$text-light: #888;
$text-size: 14px;
$padding-std: 12px;

// 页面基础样式
:deep(.page-wrapper) {
  background-color: $bg-color;
}

.page-container {
  background-color: $bg-color;
  padding: 12px;
  padding-bottom: 24px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

// 用户资料区域
.profile-content {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  margin: 0 0 12px;
  background: #fff;
  border-radius: $card-radius;
  box-shadow: $card-shadow;

  .avatar {
    border: 2px solid rgba(64, 128, 255, 0.1);
    box-shadow: 0 2px 8px rgba(64, 128, 255, 0.12);
    transform: scale(0.9);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.85);
    }
  }

  .user-info {
    margin-left: 12px;
    flex: 1;
    min-width: 0;

    .username {
      font-size: 18px;
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 200px;
    }

    .user-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;

      .uid {
        font-size: 12px;
        color: $text-light;
        background: rgba(0, 0, 0, 0.04);
        padding: 2px 8px;
        border-radius: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
      }

      .role-tags {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
      }

      :deep(.sar-tag) {
        margin: 0;
        font-weight: normal;
      }
    }
  }

  .profile-actions {
    margin-left: auto;
    padding-left: 12px;
  }
}

// 卡片通用样式
.menu-section, .menu-card {
  margin-bottom: 12px;
  border-radius: $card-radius;
  background: #fff;
  overflow: hidden;
  box-shadow: $card-shadow;
  transition: transform 0.3s ease;

  &:active {
    transform: translateY(-1px);
  }
}

// 功能图标区域
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.96);
    background-color: $active-bg;
  }

  .feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;

    :deep(.sar-icon) {
      font-size: 22px;
    }

    &:active {
      transform: scale(0.95);
    }
  }

  .feature-name {
    font-size: 13px;
    color: $text-color;
    font-weight: 500;
  }
}

// 菜单列表
.menu-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;

  :deep(.sar-icon) {
    font-size: 18px;
  }
}

.custom-list {
  background-color: #fff;

  .custom-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;

    &:last-child {
      border-bottom: none;
    }

    &:active {
      background-color: $active-bg;
      .menu-icon {
        transform: scale(0.95);
      }
    }

    .list-item-left {
      display: flex;
      align-items: center;

      .menu-title {
        font-size: 14px;
        color: $text-color;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
      }
    }

    .list-item-right {
      display: flex;
      align-items: center;

      .sar-badge {
        margin-right: 8px;
        transform: scale(0.85);
      }

      :deep(.sar-icon) {
        font-size: 14px;
        color: #ccc;
      }
    }
  }
}

// 退出登录按钮样式
.logout-section {
  margin: 24px 16px;

  :deep(.logout-button) {
    height: 44px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;

    &:active {
      opacity: 0.9;
    }
  }
}

// 页脚
.footer {
  text-align: center;
  padding: 20px 0;
  margin-top: 0;

  .footer-text {
    font-size: 12px;
    color: #999;
    opacity: 0.8;
  }
}
</style>
